Update to sidebar header styles for upcoming wallet as sidepanel#34354
Update to sidebar header styles for upcoming wallet as sidepanel#34354
Conversation
effort to standadrize panels in desktop so the future wallet as a sidebar item can work correctly https://www.figma.com/design/Fbtxfv2ATGlfH7nPXiWAbR/%F0%9F%92%BB-Browser-Sidebar?node-id=1749-34459
github-actions
bot
added
the
CI/storybook-url
aguscruiz
requested review from
fallaciousreasoning,
petemill,
sangwoo108 and
simonhong
and removed request for
petemill
|
A Storybook has been deployed to preview UI for the latest push |
Bonus, but it's very badly needed to have a properly responsive panel
📋 Code Owners Summary13 file(s) changed, 4 with assigned owners 1 team(s) affected: Owners and Their Files
|
aguscruiz
changed the title
| mixer[kColorSidebarPanelHeaderSeparator] = {nala::kColorDividerSubtle}; | ||
| mixer[kColorSearchConversionCloseButton] = {nala::kColorIconDefault}; | ||
| mixer[kColorSidebarPanelHeaderBackground] = {nala::kColorContainerBackground}; | ||
| mixer[kColorSidebarPanelHeaderBackground] = {nala::kColorPageBackground}; |
There was a problem hiding this comment.
any reason we can't just use the Nala color directly, rather than via this one?
There was a problem hiding this comment.
Removed kColorSidebarPanelHeaderBackground intermediate token entirely. Now using nala::kColorPageBackground directly at the call sites in side_panel.cc, brave_read_later_side_panel_view.cc, and brave_bookmarks_side_panel_view.cc.
| mixer[kColorSidebarPanelHeaderTitle] = {nala::kColorTextPrimary}; | ||
| mixer[kColorSidebarPanelHeaderButton] = {nala::kColorIconDefault}; | ||
| mixer[kColorSidebarPanelHeaderButtonHovered] = {nala::kColorNeutral60}; | ||
| mixer[kColorSidebarPanelBackground] = {nala::kColorContainerBackground}; |
There was a problem hiding this comment.
could we just use this nala token directly?
There was a problem hiding this comment.
Removed kColorSidebarPanelBackground intermediate token. Now using nala::kColorContainerBackground directly in brave_side_panel_view_base.cc.
|
|
||
| mixer[kColorSidebarPanelHeaderSeparator] = {nala::kColorPrimitiveNeutral20}; | ||
| mixer[kColorSidebarPanelHeaderBackground] = {nala::kColorPrimitiveNeutral5}; | ||
| mixer[kColorSidebarPanelHeaderBackground] = {nala::kColorPageBackground}; |
There was a problem hiding this comment.
Removed both kColorSidebarPanelHeaderBackground and kColorSidebarPanelBackground from the private theme mixer as well. Also removed kColorSidebarPanelHeaderSeparator and replaced it with nala::kColorDividerSubtle directly in brave_bookmarks_side_panel_view.cc.
| .sp-card { | ||
| max-width: none; | ||
| } | ||
|
|
||
| customize-chrome-appearance, |
There was a problem hiding this comment.
could these selectors be joined with a ,
There was a problem hiding this comment.
Done. Merged .sp-card and the customize-chrome-* selectors into a single comma-separated rule.
| @@ -22,9 +22,7 @@ | |||
| <link rel="manifest" href="manifest.webmanifest"> | |||
| <style> | |||
| @media (prefers-color-scheme: dark) { | |||
There was a problem hiding this comment.
can this be removed now?
There was a problem hiding this comment.
ah wait, I think this is needed to avoid a FOUC while we're loading the page
There was a problem hiding this comment.
Updated the hardcoded #111114 to var(--leo-color-container-background) so it uses the Nala token instead.
Address feedback from @fallaciousreasoning
4 participants
Effort to standadrize panels in desktop so the future wallet as a sidebar item can work within a system
https://www.figma.com/design/Fbtxfv2ATGlfH7nPXiWAbR/%F0%9F%92%BB-Browser-Sidebar?node-id=1749-34459
Resolves brave/brave-browser#53164
Resolves brave/brave-browser#53165
Resolves brave/brave-browser#47881
Current version
Updated version
Default theme - light
Default theme - dark
Color theme - light
Color theme - dark
Update to Theme and Toolbar sidepanels to make them responsive
Current version
Updated version
Screen.Recording.2026-03-02.at.12.06.25.mov